<script setup>
	// import {EluiChinaAreaDht} from 'elui-china-area-dht'
	// //获取全国地区数据
	// const chinaData = new EluiChinaAreaDht.ChinaArea().chinaAreaflat
	// const onChange = (e)=>{
	// 	const province = chinaData[e[0]].value
	// 	const city = chinaData[e[1]].value
	// 	const district = chinaData[e[2]].value
	// 	console.log(province+city+district)
	// }
	
	//导入图标
	import {
		Delete,
		Edit,
		Search,
		Upload,
		Lock,
		Plus,
		List,
		Document
	} from '@element-plus/icons-vue'
	import { ref,watch,onMounted } from 'vue'
	//导入axios
	import axios from 'axios'
	//设置axios基路径
	axios.defaults.baseURL = '/api'
	const list = ref([]) //表格数据
	const form = ref({}) //表单数据
	const searchForm = ref({ //查询表单数据
		page: 1,
		limit: 10,
		total: 100
	})
	
	//侦听器，检测page和limit的变化
	watch([() => searchForm.value.page, () => searchForm.value.limit], () => {
		getList()
	})
	
	
	const getList = () => {
		axios.post('/admin/hos/page', searchForm.value)
			.then(response => {
				// console.log(response.data)
				list.value = response.data.data
				searchForm.value.total = response.data.count
			})
	}
	
	//组件挂在后请求API接口获取数据
	onMounted(() => {
		getList()
	})
	
	//条件查询
	const search = () => {
		getList()
	}
	
	//医院等级
	const hostype = (row, column, cellValue, index)=>{
		if(cellValue==1){
			return '三级甲等'
		}else if(cellValue==2){
			return '三级乙等'
		}else if(cellValue==3){
			return '二级甲等'
		}else if(cellValue==4){
			return '二级乙等'
		}else if(cellValue==5){
			return '一级'
		}
	}
	//详情地址
	const address = (row, column, cellValue, index)=>{
		return row.provinceName+row.cityName+row.areaName+row.address
	}
	//转换状态
	const status = (row, column, cellValue, index) => {
		if (cellValue == 0) {
			return '已上线'
		} else {
			return '已下线'
		}
	}
</script>

<template>
	
	<!-- 查询表单 -->
	<el-form :inline="true" :model="searchForm">
		<el-form-item label="医院名称">
			<el-input v-model="searchForm.hosname" placeholder="请输入医院名称" />
		</el-form-item>
		<el-form-item label="医院编码">
			<el-input v-model="searchForm.hoscode" placeholder="请输入医院编码" />
		</el-form-item>
		<el-form-item label="">
			<el-button type="primary" :icon="Search" @click="search">查询</el-button>
			<el-button @click="resetForm()">清空</el-button>
	
		</el-form-item>
	</el-form>
	<!-- 数据表格 -->
	<el-table :data="list" stripe border style="width: 100%;height: 60%;" >
		<el-table-column prop="id" label="序号" width="50" />
		<el-table-column  label="医院LOGO" width="100">
			<template #default="scope">
				<div style="text-align: center;">
					<img  :src="scope.row.logoData" width="50" height="50"/>
				</div>
				
			</template>
		</el-table-column>
		<el-table-column prop="hosname" label="医院名称" show-overflow-tooltip />
		<el-table-column prop="hostype" label="医院等级" :formatter="hostype" width="100"/>
		<el-table-column prop="address" label="详细地址" :formatter="address" show-overflow-tooltip width="200"/>
		<!-- formatter可以自定义内容 -->
		<el-table-column prop="status" label="状态" :formatter="status" width="100" />
		<el-table-column prop="createTime" label="创建时间"  />
		<!-- 操作列 -->
		<el-table-column fixed="right" label="操作" width="200">
			<!-- 具名插槽 -->
			<template #default="scope">
				<el-button type="primary" size="small" @click="detail(scope.row)" :icon="Document">详情</el-button>
				<el-button type="warning" size="small" @click="schedule(scope.row.hoscode)" :icon="List">排班</el-button>
			</template>
		</el-table-column>
	</el-table>
	<!-- isall是否有全部按钮 -->
	<!-- :leave="3"表示省市区三级联动 -->
	<!-- <elui-china-area-dht  :leave="3" @change="onChange"></elui-china-area-dht> -->
</template>


<style>
</style>